<template>
	<div class="main">
		<el-carousel height="400px" :interval="3000" arrow="hover">
			<el-carousel-item v-for="(img, index) in images" :key="index">
				<img :src="img" class="carousel-image" />
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

<script>
	import localImage1 from '@/assets/图1.jpg'
	import localImage2 from '@/assets/图2.jpg'
	import localImage3 from '@/assets/图3.jpg'
	import localImage4 from '@/assets/图4.jpg'
	
	export default {
		data() {
			return {
				images: [
					localImage1,
					localImage2,
					localImage3,
					localImage4
				]
			}
		}
	}
</script>
<style scoped>
	.main {
		width: 80%;
		margin: 0 auto; /* 水平居中 */
	}

	::v-deep .el-carousel__container {
		height: 400px;
		/* 强制 carousel 容器固定高度 */
	}

	.carousel-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
</style>
